<template>
  <div class="showEssay">
    <div class="avatar">
      <n-avatar
        @click="goPerson(essay_data.user_id)"
        round
        :size="35"
        :src="host + '/api/' + essay_data.avatar"
        style="cursor: pointer;"
      />
    </div>
    <!-- 文章内容 -->
    <div class="content">
      <div class="content_username">
        <div>{{ essay_data.username }}</div>
        <div>
          <n-dropdown trigger="click" :options="selectMenu" @select="handleSelect">
            <n-button quaternary circle>
              <template #icon>
                <n-icon
                style="cursor: pointer;"
                :component="EllipsisHorizontalSharp"
                size="18"
                />
              </template>
            </n-button>
          </n-dropdown>
        </div>
      </div>
      <div style="color: gray;font-size: 13px;">{{ essay_data.create_time.replace("T", " ") }}</div>
      <div class="content_text">{{ essay_data.essay_content }}</div>
      <!-- 文章图片 -->
      <div class="content_imgs" v-if="essay_data.images[0]">
        <n-image
          v-for="item in essay_data.images" :key="item"
          style="margin-right: 20px;margin-top: 20px;"
          height="100"
          :lazy="true"
          :src="host + '/api/' + item"
        />
      </div>
      <!-- 点赞和评论等图标 -->
      <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
        <div class="content_icon">
          <n-icon
          @click="like"
          title="点赞"
          class="icon_bt"
          size="20">
            <svg v-if="isLike" color="#63e2b7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311h-.3v428h472.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM112 528v364c0 17.7 14.3 32 32 32h65V496h-65c-17.7 0-32 14.3-32 32z" fill="currentColor"></path></svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7c9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z" fill="currentColor"></path></svg>
          </n-icon>
          <n-icon
          title="评论"
          class="icon_bt"
          :component="ChatboxOutline"
          size="20"
          @click="isComment = !isComment"
          />
          <n-icon
          @click="collect"
          title="收藏"
          class="icon_bt"
          size="23"
          >
          <svg v-if="!isCollect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z" fill="currentColor"></path></svg>
          <svg v-else color="#63e2b7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z" fill="currentColor"></path></svg>
          </n-icon>
        </div>
        <div style="color: gray;font-size: 13px;cursor: pointer;margin-right: 5px;" @click="showContentModal = true">查看详情</div>
      </div>
      <!-- 点赞人 -->
      <div class="like_people" v-if="essay_data.LikePeople[0]">
        <span v-for="item in essay_data.LikePeople" :key="item.lphone" @click="goPerson(item.user_id)" style="color: #63e2b7;cursor: pointer;">{{ item.lusername }}、</span>
        <span style="color: gray;">觉得很赞</span>
      </div>
      <!-- 评论输入框 -->
      <commentInput v-if="isComment" :target="{type: 'essay',username: ''}" @reply="reply"></commentInput>
      <!-- 评论 -->
      <div v-if="essay_data.comment[0]" class="content_comment">
        <div v-for="item in showCommentData" :key="item.comment_id" style="margin-top: 10px;">
          <div>
            <span style="cursor: pointer;color: #63e2b7;" @click="goPerson(item.user_id)">{{ item.username }}</span><span v-if="item.target.type=='user'"> 
              回复 <i style="color: #63e2b7;">@{{ item.target.username }}</i></span><div @click="replyComment(item.comment_id)" class="content_line">{{ item.comment_content }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin-top: 0px;">
            <div style="color: gray;font-size: 12px;">{{ item.comment_time.replace("T", " ") }}</div>
            <div style="color: gray;font-size: 12px;cursor: pointer;" @click="replyComment(item.comment_id)">回复</div>
          </div>
          <commentInput v-if="isCommentId == item.comment_id" :target="{type: 'user',username: item.username}" @reply="reply"></commentInput>
        </div>
        <div style="margin-top: 20px;display: flex;justify-content: center;" v-if="essay_data.comment.length>=5">
          <n-pagination v-model:page="page" size="small" :page-count="Math.ceil(essay_data.comment.length/5)" @update:page="changePage"/>
        </div>
      </div>
    </div>
  </div>
  <n-divider />
  <showEssayModal :showContentModal="showContentModal" :essayData="essay_data" @close_modal="close_modal"></showEssayModal>
</template>

<script setup lang='ts'>
import _ from "lodash"
import {essayListType, commentType} from "../types"
import { EllipsisHorizontalSharp,ChatboxOutline } from '@vicons/ionicons5'
import commentInput from "./commentInput.vue";
import showEssayModal from "./showEssayModal.vue";
import { likeEssay,deleteEssay,commentEssay, collectEssay } from "../api/essay";
import { useDialog } from 'naive-ui';
import {ref,onMounted,inject} from "vue";
import router from "../router";

const dialog = useDialog()
const host = ref(inject("host"))
const isLike = ref(false)
const isCollect = ref(false)
const isComment = ref(false)
const isCommentId = ref()
const page = ref(1)
const showCommentData = ref<commentType[]>()
const selectMenu = ref([
  {
    label: '举报',
    key: 'report'
  },
  {
    label: '删除',
    key: 'delete',
  },
])
var showContentModal = ref(false)

const props = defineProps<{
  essay_data: essayListType,
  isAdmin?: boolean
}>()

// 查看用户主页
const goPerson = (user_id:number) => {
  const personUrl = router.resolve({
    path: "/person/" + user_id,
  })
  window.open(personUrl.href, '_blank')
  // router.push("/person/" + user_id)
}

// 收藏
const collect = () => {
  const phone = localStorage.getItem("token") as string
  if(!isCollect.value){
    props.essay_data.CollectPeople.push(phone)
  }else{
    props.essay_data.CollectPeople = props.essay_data.CollectPeople.filter(e => e != phone)
  }
  isCollect.value = !isCollect.value
  collect_debounce()
}
const collect_debounce = _.debounce(async () => {
  //发请求
  await collectEssay({
    essayId: props.essay_data.essay_id,
    phone: localStorage.getItem("token"),
    isCollect: isCollect.value
  })
},1000)

// 点赞
const like = () => {
  const phone = localStorage.getItem("token") as string
  if(!isLike.value){
    props.essay_data.LikePeople.push({
      lphone: phone,
      lusername: localStorage.getItem("username") as string,
      lavatar: localStorage.getItem("avatar") as string,
      user_id: Number(localStorage.getItem("user_id"))
    })
  }else{
    props.essay_data.LikePeople = props.essay_data.LikePeople.filter(e => e.lphone != phone)
  }
  isLike.value = !isLike.value
  like_debounce()
}
const like_debounce = _.debounce(async () => {
  //发请求
  await likeEssay({
    essayId: props.essay_data.essay_id,
    phone: localStorage.getItem("token"),
    isLike: isLike.value
  })
},1000)

const replyComment = (value:number) => {
  if(isCommentId.value == value){
    isCommentId.value = 0
  }else{
    isCommentId.value = value
  }
}

const handleSelect = async(key:string) => {
  if(key == "delete"){
    dialog.warning({
      title: '警告',
      content: props.isAdmin?'确定删除该用户的文章？':'确定删除该文章？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        const res = await deleteEssay(props.essay_data.essay_id)
        if(res.code == "200"){
          window.$message.success("删除成功！")
          router.go(0)
        }else{
          window.$message.error(res.message)
        }
      },
      onNegativeClick: () => {
      }
    })
  }
  if(key == "report"){
    window.$message.warning("举报功能暂未开放！")
  }
}

// 回复评论
const reply = async(commentData:object) => {
  console.log({...commentData,essayId: props.essay_data.essay_id})
  const res = await commentEssay({...commentData,essayId: props.essay_data.essay_id})
  console.log(res)
  if(res.code!="200"){
    window.$message.warning(res.message)
  }else{
    props.essay_data.comment.push(res.data)
    isComment.value = false
    isCommentId.value = 0
    router.go(0)
  }
}

const changePage = (page:number) => {
  showCommentData.value = props.essay_data.comment.slice((page-1)*5,page*5)
}

const close_modal = () => {
  showContentModal.value = false
}

onMounted(() => {
  props.essay_data.LikePeople.forEach(e => {
    if(e.lphone == localStorage.getItem("token")){
      isLike.value = true
    }
  })
  props.essay_data.CollectPeople.forEach(e => {
    if(e == localStorage.getItem("token")){
      isCollect.value = true
    }
  })
  if(props.essay_data.phone != localStorage.getItem("token") && !props.isAdmin){
    selectMenu.value = [selectMenu.value[0]]
  }

  showCommentData.value = props.essay_data.comment.slice(0,5)

})
  
</script>

<style lang='scss' scoped>
  .showEssay{
    // border: 1px solid gray;
    display: flex;
    justify-content: flex-start;
    .avatar{
      flex: 1;
      width: 0;
      padding-top: 5px;
    }
    .content{
      flex: 14;
      width: 0;
      padding: 0 10px 0 0;
      .content_username{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content_text{
        margin-top: 10px;
        padding-right: 20px;
        white-space:pre-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
      }
      .content_imgs{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .content_icon{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon_bt{
          margin-right: 40px;
          cursor: pointer;
        }
        .icon_bt:hover{
          color: #63e2b7;
        }
      }
      .like_people{
        margin-top: 20px;
      }
      .comment_input{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
      .content_comment{
        margin-top: 20px;
        padding: 5px 10px 10px 10px;
        background-color: var(--bs-comment-background);
        .content_line{
          overflow-wrap: break-word;
          white-space: pre-line;
          cursor: pointer;
          padding: 2px 0 0 0;
        }
      }
    }
  }
</style>